<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <!--1. 引入jquery-->
    <script src="/webjars/jquery/3.6.1/jquery.min.js"></script>
    <!--2. 引入bootstrap的css-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--3. 引入bootstrap的js-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .table{
            text-align: center;
        }
    </style>
</head>
<body>
   <div class="container">
       <div class="panel panel-primary">
           <div class="panel-heading">
               <h3 class="panel-title">
                   <h4>Springboot / Thymeleaf / Webjars / BS / Mapper整合开发</h4>
               </h3>
           </div>
           <table class="table table-hover table-striped">
               <tr>
                   <td>学号</td>
                   <td>姓名</td>
                   <td>性别</td>
                   <td>年龄</td>
                   <td>住址</td>
                   <td>所在班级</td>
                   <td>操作</td>
               </tr>
               <tr th:each="stud : ${pr.rows}">
                   <td>[[${stud.sid}]]</td>
                   <td th:text="${stud.sname}"></td>
                   <td>[[${stud.sex}]]</td>
                   <td>[[${stud.age}]]</td>
                   <td>[[${stud.addr}]]</td>
                   <td>[[${stud.cname}]]</td>
                   <td>
                       <div class="btn-group" role="group" aria-label="...">
                       <a href="javascript:;" class="btn btn-success btn-sm glyphicon glyphicon-pencil"
                          th:onclick="updateUI([[${stud.sid}]],[[${stud.sname}]],[[${stud.sex}]],[[${stud.age}]],[[${stud.addr}]],[[${stud.cid}]])"></a>
                       <a th:href="'/student/delete?sid=' + ${stud.sid}" onclick="return confirm('真的要删除吗？')" class="btn btn-danger btn-sm glyphicon glyphicon-trash"></a>
                       </div>
                   </td>
               </tr>
           </table>
           <div class="panel-footer text-right" style="display: flex;justify-content: space-between">
               <!--1. 条件查询-->
               <form class="form-inline" action="/student/search" method="post" style="margin-top: 20px;">
                   <input type="hidden" name="page" id="page" value="1">
                   <div class="form-group">
                       <input type="text" class="form-control"  name="sname" th:value="${student.sname}" placeholder="输入学生姓名">
                   </div>
                   <div class="form-group">
                       <input type="text" class="form-control"  name="addr" th:value="${student.addr}" placeholder="请输入学生住址">
                   </div>
                   <div class="form-group">
                       <select class="form-control" name="cid">
                           <option value="0" >所有班级</option>
                           <option th:value="${c.cid}" th:each="c : ${classes}"
                                   th:selected="${c.cid==student?.cid}">
                               [[${c.cname}]]</option>
                       </select>
                   </div>
                       <button type="submit" class="btn btn-default">开始查询</button>
                       <button type="button" class="btn btn-success" onclick="addUI()">添加学生</button>
               </form>
               <!--2. 分页导航-->
               <nav aria-label="Page navigation" style="display:flex;justify-content: right" th:if="${pr.pages > 0}">
                   <ul class="pagination">
                       <li>
                           <a href="#" aria-label="Previous">
                               <span aria-hidden="true">&laquo;</span>
                           </a>
                       </li>
                       <li  th:each="page : ${#numbers.sequence(1,pr.pages)}" th:class="${page == pr.page ? 'active' : ''}">
                           <a th:onclick="skipPage([[${page}]])" href="javascript:;">[[${page}]]</a>
                       </li>
                       <li>
                           <a href="#" aria-label="Next">
                               <span aria-hidden="true">&raquo;</span>
                           </a>
                       </li>
                   </ul>
               </nav>
           </div>
       </div>
   </div>

   <!--添加或修改对话框-->
   <div class="modal fade" id="myModal" >
       <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                   <h4 class="modal-title" id="title">Modal title</h4>
               </div>
               <div class="modal-body">
                   <form class="form-horizontal" action="/student/add" method="post">
                       <input type="hidden" name="sid" id="sid">
                       <div class="form-group">
                           <label class="col-sm-2 control-label">学生姓名</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" id="sname" name="sname" placeholder="输入学生姓名">
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">学生性别</label>
                           <div class="col-sm-10">
                               <div class="radio">
                                   <label>
                                       <input type="radio" id="sex1" name="sex" value="男" checked>男
                                   </label>
                                   <label>
                                       <input type="radio"  id="sex2" name="sex" value="女">女
                                   </label>
                               </div>
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">学生年龄</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" id="age" name="age" placeholder="输入学生年龄">
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">学生住址</label>
                           <div class="col-sm-10">
                               <input type="text" class="form-control" id="addr" name="addr" placeholder="输入学生住址">
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-sm-2 control-label">所在班级</label>
                           <div class="col-sm-10">
                               <select class="form-control" id="cid" name="cid">
                                   <option value="0" >所有班级</option>
                                   <option th:value="${c.cid}" th:each="c : ${classes}">[[${c.cname}]]</option>
                               </select>
                           </div>
                       </div>
                   </form>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                   <button type="button" class="btn btn-primary" onclick="save()">保存</button>
               </div>
           </div>
       </div>
   </div>
</body>
</html>
<script>
    //1. 点击分页按钮，提交表单
    function skipPage(p){
      //1.1 为表单隐藏域中的page赋值
      $("#page").val(p)
      //1.2 提交表单
      document.forms[0].submit()
    }
    //2. 添加学生界面
    function addUI(){
        //2.1 修改对话框标题
        $("#title").html("添加学生")
        //2.2 清空表单
        document.forms[1].reset();
        //2.3 显示对话框
        $('#myModal').modal('show')

    }
    //3. 修改界面显示
    function updateUI(sid,sname,sex,age,addr,cid){
        console.log(sid,sname,sex,age,addr,cid)
        //3.1 为表单控件赋值
        $("#sid").val(sid)
        $("#sname").val(sname)
        $("#age").val(age)
        $("#addr").val(addr)
        $("#cid").val(cid)
        //处理性别字段的显示
        $("#sex1").prop("checked",sex == '男' ? true: false)
        $("#sex2").prop("checked",sex == '女' ? true: false)
        //3.2 修改对话框标题
        $("#title").html("修改学生")
        //3.2 打开对话框
        $('#myModal').modal('show')
    }
    //4. 保存学生
    function save(){
        //4.1 根据sid是否有值，决定是添加还是修改
        let sid = $("#sid").val()
        if(sid){
            document.forms[1].action = "/student/update"
        }
        //4.2 提交到后台
        document.forms[1].submit()

    }
</script>